<template>
	<div class="vue_app myWallet" style="position: relative;width: 100%;height: 100%;padding-top: 13rem;">
		<div style="position: absolute;width: 100%;top: 0;z-index: 1;">
			<my-header :title="'我的钱包'" :hasTitle="true" :hasBack="true"></my-header>
			<span class="buycarddetil" @click="jumpEventwallet">修改钱包密码</span>
			<!--头部-->
			<div class="integration_top" style="height: 8rem;background: #38B035;">
				<div class="alineRight"><span class="statement" @click="jumpEventBalance"><i class="icon njfont nj-mingxi" style="vertical-align: middle;margin-right: 0.2rem;"></i><span>充值明细</span></span></div>
				<h1>￥{{allgiftdata?allgiftdata.toFixed(2):"0.00"}}</h1>
				<span class="grayColor">可用余额（元）</span>
				<div class="alineRight">
					<span class="statement2" v-if="lockAmount">订单锁定：{{lockAmount}}元</span>
				</div>
			</div>
			<tab-head :titleInfor="titleInfor" v-if="titleInfor">
			</tab-head>
		</div>
		<div style="width: 100%;height:100%;">
			<translate-main :lengths="3">
				<ul v-if="initData" class="aui-list aui-media-list detailed_list" style="padding-bottom: 3.2rem;background-color: inherit;">
					<li class="aui-list-item" v-for="val in initData" style="background-color: #fff;">
						<div class="aui-list-item-inner">
							<span class="aui-list-item-title">{{styletouchBalance(val.userType)}}</span>
							<span class="aui-list-item-title">{{val.createTm | time}}</span>
							<span class="points"><strong class="pointsok">{{(val.userType=='1' ||val.userType=='4') ?"-":"+"}}</strong>{{val.verificationBalance?val.verificationBalance.toFixed(2):"0.00"}}</span>
						</div>
					</li>
					<div class="no_data" v-if="initData.length==0 && flag" style="background-color: #F5F5F5;">
						<img src="static/image/no_news.png" style="width:70%;" />
						<p>暂无余额数据</p>
					</div>
				</ul>
			</translate-main>
		</div>
		<div class="cardoperation">
			<span @click="jumpEventbuycard">购买礼品卡  充值</span>
			<span @click="jumpEventActivate">激活礼品卡  充值</span>
		</div>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import TranslateMain from '../../real-components/TranslateTest';
	import TabHead from '../../real-components/TabHeadOrder';
	import { mapGetters } from "vuex";
	import { showLoading, hideLoading } from "@/utils/loading";
	export default {
		data() {
			return {
				titleInfor: [{
					goodsClassId: "",
					goodsClassName: "全部"
				}, {
					goodsClassId: "",
					goodsClassName: "余额增加"
				}, {
					goodsClassId: "",
					goodsClassName: "余额减少"
				}],
				//我的礼品卡的单个数据
				walletData: [],
				//我的礼品卡总的余额
				allgiftdata: "",
				//钱包id
				purseId: "",
				//钱包锁定金额
				lockAmount:"",
				flag:false
			}
		},
		components: {
			"my-header": MyHeader,
			"translate-main": TranslateMain,
			"tab-head": TabHead,
		},
		methods: {
			styletouchBalance(state){
				if(state==1){
					return "购物消费"
				}else if(state==2){
					return "订单退款"
				}else if(state==3){
					return "礼品卡充值"
				}else if(state==4){
					return "线下消费"
				}
			},
			//跳转到充值明细页面（购买礼品卡页面）
			jumpEventBalance() {
				this.$router.push({
					path: 'RechargeDetail?walletid='+this.purseId
				})
			},
			//跳转到购买礼品卡页面
			jumpEventbuycard() {
				this.$router.push({
					path: 'buyGiftCard'
				})
			},
			//跳转激活礼品卡
			jumpEventActivate() {
				this.$router.push({
					path: 'ActivateGiftCard'
				})
			},
			//跳转修改钱包密码
			jumpEventwallet(){
				this.$router.push({
					path: 'SetKeyWallet'
				})
			},
			//获取数据请求
			getcarddata() {
				//获取钱包余额
				var sessionId = localStorage.getItem('sessionId');
				let config2 = {
					url: window.api.customer_host + '/purse/selectPurseInfo',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config2).then((res) => {
					this.allgiftdata = res.data.data[0].availAmount
					this.purseId = res.data.data[0].rid
					this.lockAmount = res.data.data[0].lockAmount
				})
			},
			getcarddata2() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				//获取余额支付明细
				let config1 = {
					url: window.api.customer_host + '/purseVerification/selectPurseVerificationList',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
					params: {
						purseId: this.purseId,
					},
				};
				axios(config1).then((res) => {
					hideLoading()
					this.flag = true
					for(var i=0;i<res.data.data.length;i++){
						if(res.data.data[i].status !=0 && res.data.data[i].status !=2){
							this.walletData.push(res.data.data[i])
						}
					}
				}).catch(err=>{
					hideLoading()
					Toast({
						duration: 2000,
						message: '请求接口失败',
						type: "fail"
					});
				})
			},
		},
		computed: {
			...mapGetters('wxh', [
				'userInfo'
			]),
			activeIndex() {
				return this.$store.state.cjy.classifyIndex
			},
			initData() {
				let arr1 = [];
				let arr2 = [];
				if(this.walletData) {
					for(let i = 0; i < this.walletData.length; i++) {
						if(this.walletData[i].userType == '1' || this.walletData[i].userType == '4') {
							arr1.push(this.walletData[i]);
						} else if(this.walletData[i].userType == '2' || this.walletData[i].userType == '3'){
							arr2.push(this.walletData[i]);
						}
					}
				}
				if(this.activeIndex == '0') {
					return this.walletData;
				} else if(this.activeIndex == '2') {
					return arr1;
				} else if(this.activeIndex == '1') {
					return arr2;
				}

			}
		},
		filters: {
			Time: function(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1:'0' + (date.getMonth() + 1)}-${date.getDate()> 9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}`;
				}
			}
		},
		created() {
            this.$store.dispatch('cjy/changeClassifyIndex', 0)
		},
		watch: {
			purseId(data) {
				if(data) {
					this.getcarddata2();
				}
			}
		},
		mounted() {
			this.getcarddata();

		},
	}
</script>

<style>
	/*修改钱包密码*/
	.myWallet .buycarddetil {
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
	.overhid {
		overflow: hidden;
	}
	/*余额明细小图标按钮 */
	
	/* .statement {
		display: inline-block;
		position: absolute;
		top: 3.5rem;
		right: 0.5rem;
	} */
	
	.statement2 {
		/* display: inline-block;
		position: absolute;
		bottom: 3.2rem;
		right: 0.5rem; */
	}
	.alineRight {
		text-align: right;
	}
	.grayColor {
		color: #ffffff;
	}
	/*钱包余额明细样式*/
	.myWallet .points {
		font-size: 1rem;
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		display: inline-block;
		color: #EF5423;
	}
	
	.myWallet .pointsok {
		margin-right: 0.5rem;
		color: #EF5423;
	}
	/*礼品卡卡面信息展示*/
	/*.myWallet .coupon_list li .account_money {
		line-height: 1.5rem;
	}
	
	.myWallet .coupon_list li .account_money span {
		color: #EF5423;
		font-size: 1rem;
	}
	
	.myWallet .coupon_list li dl {
		text-align: left;
		padding-left: 1rem;
		line-height: 1rem;
	}
	
	.myWallet .coupon_list li dl p {
		font-size: 0.5rem;
	}
	
	.myWallet .coupon_list li em {
		font-size: 0.1rem;
		right: 0.01rem;
		bottom: 0.3rem;
	}
	
	.myWallet .coupon_list li.already .account_money span {
		color: #9a9a9a;
	}
	
	.myWallet .coupon_list li.already {
		background: url(/static/image/coupon_bj22.png) no-repeat right 2.8rem;
		background-size: 20%;
		background-color: #fff;
	}*/
	/*卡的操作（礼品卡的购买和激活按钮）*/
	
	.myWallet .cardoperation {
		position: fixed;
		bottom: 0rem;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		background-color: #fff;
	}
	
	.myWallet .cardoperation span {
		display: inline-block;
		width: 45%;
		height: 2rem;
		line-height: 2rem;
		font-size: 0.8rem;
		margin: 0px 0.3rem;
		border-radius: 0.2rem;
	}
	
	.myWallet .cardoperation span:first-child {
		background-color: #EF5423;
		color: #fff;
	}
	
	.myWallet .cardoperation span:last-child {
		border: 1px solid #EF5423;
		color: #EF5423;
	}
	/*余额明细样式*/
	
	.aui-list .aui-list-item {
		border-top: 1px solid #f1f1f1;
	}
	
	.aui-media-list .aui-list-item-inner {
		text-align: left;
	}
	.aui-list .aui-list-item-title {
		display: inline-block;
		width: 70%;
		text-align: left;
	}
</style>